const x1 = 0;
const x2 = 400;
const y1 = 0;
const y2 = 400;
const step = 15;

var g_canvas, g_context;

function drawLines()
{
    for ( var x = x1; x < x2; x += step ) 
    {
        g_context.moveTo( x, x1 );
        g_context.lineTo( x, x2 );
    }
    for ( var y = y1; y < y2; y += step ) 
    {
        g_context.moveTo( y1, y );
        g_context.lineTo( y2, y );
    }
}

function drawText()
{
    g_context.strokeStyle = "#808080";
    g_context.save();
    g_context.stroke();
    g_context.font = "20px Brush Script Std";
    g_context.restore();
    g_context.fillText( "Homework.", 150, 28 );
    g_context.fillText( "I think summer is the best season of all because", 10, 58 );
    g_context.fillText( "it is warm and the nature is beautiful. Summer ", 10, 88 );
    g_context.fillText( "is a time of holidays. We can go anywhere,", 10, 118 );
    g_context.fillText( "spend our time near a river or a lake on fresh,", 10, 148 );
    g_context.fillText( "green grass, swim in warm water, or climb", 10, 178 ); 
    g_context.fillText( "mountains, play different games, ride a", 10, 208 );
    g_context.fillText( "bicycle and so on...", 10, 238 );
    g_context.fillText( "P.S. I love summer!", 10, 268 );
}

function drawGradient()
{
    var gradient = g_context.createRadialGradient( 400, 400, 5, 400, 400, 200 );
    gradient.addColorStop( 0, "#ff0000" );
    gradient.addColorStop( 0.1, "#ffa500" );
    gradient.addColorStop( 0.2, "#ffff00" );
    gradient.addColorStop( 0.3, "#00ff00" );
    gradient.addColorStop( 0.4, "#42aaff" );
    gradient.addColorStop( 0.5, "#0000ff" );
    gradient.addColorStop( 0.6, "#8b00ff" );
    g_context.fillStyle = gradient;
    g_context.fillRect( 300, 300, 100, 100 );
}

function onloadHandler()
{
    g_canvas = document.getElementById( 'canvas' );
    g_context = g_canvas.getContext( '2d' );

    drawLines();
    drawText();
    drawGradient();
}    

window.onload = onloadHandler;